<template>
  <div id="alert">
    <el-row>
      <el-alert title="成功提示" type="success"></el-alert>
      <el-alert title="消息提示" type="info"></el-alert>
      <el-alert title="警告提示" type="warning"></el-alert>
      <el-alert title="错误提示" type="error"></el-alert>
    </el-row>
    <hr>
    <el-row>
      <el-alert title="不可关闭" type="success" :closable="false"></el-alert>
      <el-alert title="自定义 close-text" type="info" :close-text="知道了"></el-alert>
      <el-alert title="设置了回调函数" type="warning" @close="hello"></el-alert>
    </el-row>
    <hr>
    <el-row>
      <el-alert title="成功" type="success" center show-icon></el-alert>
    </el-row>
    <hr>
    <el-row>
      <el-alert title="错误提示的文案" type="error" show-icon description="文字说明文字说明文字说明文字说明文字说明文字说明文字说明"></el-alert>
    </el-row>
  </div>
</template>

<script>
export default {
  methods: {
    hello () {
      alert('Hello World!')
    }
  }
}
</script>
